<template>
    <div class="box">
        <!-- 123456 -->
        <header>
            <div class="time">
                <span></span>
            </div>
            <!-- <div class="t></div> -->
            <h2>七尾智慧社区可视化大屏</h2>
            <div></div>
        </header>
        <main>
            <div class="wrap">
                <div class="left">
                    <!-- <div id="leftbox"></div> -->
                    <div id="leftbox" style="width:755px;height:380px"></div>
                </div>
                <div class="community"></div>
                <div class="right"></div>
                <div class="footer"></div>


            </div>
        </main>
    </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    name: 'IntegratedVisualization',

    data() {
        return {

        };
    },

    mounted() {
        var chartDom = document.getElementById('leftbox');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            title: {
                text: 'Referer of a Website',
                subtext: 'Fake Data',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 1048, name: 'Search Engine' },
                        { value: 735, name: 'Direct' },
                        { value: 580, name: 'Email' },
                        { value: 484, name: 'Union Ads' },
                        { value: 300, name: 'Video Ads' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

    },

    methods: {

    },
};
</script>

<style lang="less" scoped>
.box {
    width: 100%;
    height: 100vh;
    background: url('https://s1.ax1x.com/2022/10/26/xWfVf0.jpg') no-repeat;
    background-size: cover;
    position: relative;
    padding: 40px;

    header {
        width: 100%;
        height: 50px;
        background: url('https://cdn3.axureshop.com/demo/2033334/images/%E6%99%BA%E6%85%A7%E7%A4%BE%E5%8C%BA%E7%BB%BC%E5%90%88%E5%8F%AF%E8%A7%86%E5%8C%96%E5%A4%A7%E5%B1%8F/u88.svg') no-repeat;
        background-size: cover;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        top: 0px;
        left: 50%;
        transform: translateX(-50%);

        h2 {
            padding-left: 120px;
            font-size: 22px;
            color: #1890FF;
        }

        div {
            width: 40px;
            color: #fff;
        }

    }

    main {
        border: 1px solid #fff;
        position: relative;
        height: 100vh;

        .wrap {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            top: 0;
            bottom: 0;
            margin: 0 auto;
            height: 100%;

            .left {
                height: 100%;
            }
        }

    }

}
</style>